<template>
	<view class="container">
		<view class="share__title">Wxml:</view>
		<view class="share__canvas share__canvas1">
			<view class="share__canvas1-text draw_canvas" data-type="text" data-text="这是一段无边距文字">这是一段无边距文字</view>
			<view class="share__canvas1-text-2 draw_canvas" data-type="text" data-text="这是一段margin文字">这是一段margin文字
			</view>
			<view class="share__canvas1-text-3 draw_canvas" data-type="text" data-text="这是一段padding文字">这是一段padding文字
			</view>
			<view class="share__canvas1-text-4 draw_canvas" data-type="text" data-text="这是一段居中有背景文字">这是一段居中有背景文字</view>
			<view class="share__canvas1-text-5 draw_canvas" data-type="text" data-text="这是一段背景文字"
				data-background="rgba(255, 0, 0, 0.4)" data-padding="0 0 0 0">这是一段背景文字</view>
			<image class="share__canvas2-image draw_canvas" data-type="image"
				data-url="https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0"
				src="https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0">
			</image>
		</view>

		<view class="share__title">Canvas:</view>
		<canvas canvas-id="canvas1" class="canvas1"></canvas>
	</view>
</template>

<script>
	import wxml2canvas from '../../utils/wxml2canvas/index.js'
	export default {
		name: "wxmlCanvas",
		data() {
			return {
				width: '',
				height: ''
			};
		},
		onShow() {
			this.drawImage1Fun()
		},
		methods: {
			drawImage1Fun() {
				let self = this;
				this.drawImage1 = new wxml2canvas({
					width: 340,
					height: 210,
					element: 'canvas1',
					background: '#f0f0f0',
					progress(percent) {
						console.log('percent', percent);
					},
					finish(url) {
						console.log('url', url);
						// let imgs = self.data.imgs;
						// imgs.push(url);

						// self.setData({
						// 	imgs
						// })
					},
					error(res) {
						console.log('err', res);
					}
				});

				let data = {
					list: [{
						type: 'wxml',
						class: '.share__canvas1 .draw_canvas',
						limit: '.share__canvas1',
						x: 20,
						y: 20
					}]
				}

				this.drawImage1.draw(data);
			},
			// drawCanvas() {
			// 	wx.showLoading()
			// 	const that = this
			// 	const query = wx.createSelectorQuery().in(this);
			// 	query.select('#wrapper').fields({ // 选择需要生成canvas的范围
			// 		size: true,
			// 		scrollOffset: true
			// 	}, data => {
			// 		this.width = data.width;
			// 		this.height = data.height;
			// 		setTimeout(() => {
			// 			that.startDraw()
			// 		}, 1500);
			// 	}).exec()
			// },
			// startDraw() {
			// 	let that = this

			// 	// 创建wxml2canvas对象
			// 	let drawMyImage = new wxml2canvas({
			// 		element: 'canvas-map', // canvas的id,
			// 		obj: that, // 传入当前组件的this
			// 		width: this.width * 2,
			// 		height: this.width * 2,
			// 		background: '#141415', // 生成图片的背景色
			// 		progress(percent) { // 进度
			// 			// console.log(percent);
			// 		},
			// 		finish(url) { // 生成的图片
			// 			wx.hideLoading()
			// 			console.log('url', url)
			// 			that.savePoster(url)
			// 		},
			// 		error(res) { // 失败原因
			// 			console.log(res);
			// 			wx.hideLoading()
			// 		}
			// 	}, this);
			// 	let data = {
			// 		// 获取wxml数据
			// 		list: [{
			// 			type: 'wxml',
			// 			class: '.wrapper .draw1', // draw要绘制的wxml元素根类名， draw1单个元素的类名（所有所有所有要绘制的单个元素都要添加该类名）
			// 			limit: '.wrapper', // 要绘制的wxml元素根根根类名
			// 			x: 0,
			// 			y: 0
			// 		}]
			// 	}
			// 	// 绘制canvas

			// 	drawMyImage.draw(data, this)
			// },
			savePoster(url) {
				const that = this
				wx.saveImageToPhotosAlbum({
					filePath: url,
					success: function() {
						wx.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 1500
						});
					},
					fail(err) {
						console.log('res');
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share__title {
		width: 100%;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	// 必须加
	.canvas1 {
		width: 700rpx;
		// height: 420rpx;
		background: #f0f0f0;
	}

	/* 内容 */
	.share__canvas {
		width: 700rpx;
		// height: 420rpx;
		background: #f0f0f0;
		margin-bottom: 40rpx;
		font-size: 32rpx;
		border: 1px solid red;

		.share__canvas1-text {
			color: #000000;
		}

		.share__canvas1-text-2 {
			color: #ff0000;
			font-size: 36rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}

		.share__canvas1-text-3 {
			color: #00ff00;
			padding-left: 40rpx;
			padding-top: 20rpx;
		}

		.share__canvas1-text-4 {
			color: #0000ff;
			margin-left: 20rpx;
			margin-top: 20rpx;
			width: 600rpx;
			text-align: center;
			background: rgba(255, 0, 0, 0.4);
			padding: 20rpx;
		}

		.share__canvas1-text-5 {
			color: #0000ff;
			margin-left: 20rpx;
			margin-top: 20rpx;
			width: 600rpx;
			background: rgba(255, 0, 0, 0.4);
			padding: 20rpx;
		}
		
		.share__canvas2-image {
		    width: 300rpx;
		    height: 100rpx;
		    border: 2px solid #ff0000;
		    margin: 10rpx 20rpx;
		    box-shadow: 20rpx 20rpx 10rpx #cccccc;
		}
	}
</style>